<template>
    <div class="container" @click="hancldeGalleryClick">
        <div class="wrapper">
            <swiper :options='swiperOptions'>
                <swiper-slide v-for="(item,index) of imgs" :key="index">
                    <img class='gallery-img' :src="item">
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'CommonGallery',
        props: {
            imgs:Array
        },
        data() {
            return {
                swiperOptions: {
                    pagination: '.swiper-pagination',
                    // swiper内置api：根据不同参数设置图片下面的样式为原点或者数字
                    paginationType: 'fraction',
                    // 让swiper自我刷新：解决当轮播组件从隐藏到显示无法正常滚动
                    observeParents: true,
                    observer: true
                }
            }
        },
        methods: {
            // 当点击轮播图时，关闭 
            hancldeGalleryClick() {
                this.$emit('close');
            }
        }
    }
</script>
<style lang="less">
    .container {
        .swiper-pagination {
            overflow: inherit;
        }
    }
</style>

<style lang="less" scoped>
    .container {
        .swiper-container {
            overflow: inherit;
        }
    }
    .container {
        position: absolute;
        z-index: 99;
        display: flex;
        flex-direction: column;
        justify-content: center;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #000;
        .wrapper {
            // overflow: hidden;
            padding-bottom: 98%;
            background: #fff;
            height: 0;
            width: 100%;
            .gallery-img {
                width: 100%;
            } // 轮播图下面按钮的样式
            .swiper-pagination {
                color: #fff;
                bottom: -1rem;
            }
        }
    }
</style>



